import Taro, { Component } from '@tarojs/taro'
import { View,Text} from '@tarojs/components'
import { AtForm, AtButton, AtIcon,AtCheckbox,AtActionSheet, AtActionSheetItem } from 'taro-ui'
import { DNavBar, DAtInpute, DAgree } from '@/components'
import './adduserbank.scss'
import http  from '@/api'
export default class Adduserbaknk extends Component {

    constructor(props) {
        super(props)
		let codeNum = 30
        this.state = {
            obj: {
                account: "",
                bank: "",
                name: "",
                telphone: "",
				
            },
			isOpened:false,
			belongToBankList:require('@/common/').default.belongbankList,
			codeInfo:'',
			agreeStatus:false,
			checkedList:[],
			codeStatus:codeNum,
			limitCode:codeNum,
        }
    }

    onHandleAccount(account) {
		
        this.setState({
            obj: {
                ...this.state.obj,
                account
            }
        })
    }

    onHandleBank(bank) {
		// if( /^[a-zA-Z0-9]*([a-zA-Z][0-9]|[0-9][a-zA-Z])[a-zA-Z0-9]*$/.test(bank)){
			
		// }
        this.setState({
            obj: {
                ...this.state.obj,
                bank
            }
        })
    }

    onHandleName(name) {
        this.setState({
            obj: {
                ...this.state.obj,
                name
            }
        })
    }
   
    onHandleTelphone(telphone) {
        this.setState({
            obj: {
                ...this.state.obj,
                telphone
            }
        })
    }
	shouldComponentUpdate(){
		return true
	}
	onHandleChange(value) {
	    this.setState({
	        agreeStatus: value
	    })
	}
    onSentCode(){
		let {codeStatus, limitCode} =  this.state 
		if(!this.state.obj.telphone||!require('@/common/index').default.iphoneTest(this.state.obj.telphone)){
			return Taro.showToast({
			  title: "请输入正确持卡人银行预留手机联系方式！",
			  icon: "none"
			})
		}
		
		http.getUserCode({mobile:this.state.obj.telphone,type:'1'}).then(res=>{
			let codeInfo = res
			// this.setState({
			// 	codeInfo
			// })
		})
		var codeTimer = setInterval(()=>{
			if(codeStatus >=1&&codeStatus<=limitCode){
				codeStatus -= 1
			}else if(codeStatus ==0){
				codeStatus = limitCode
				clearTimeout(codeTimer)
			}
			this.setState({
				codeStatus,
				
			})
		},1000)
		
	}
	handleChange(val){
		this.setState({
			checkedList:val
		})
	}
	handleActionSheet(bank){
		let {obj} = this.state
		obj.bank = bank
		this.setState({
			obj:obj,
			isOpened:false
		})
	}
    onSubmit() {
        let {
            obj,codeInfo,agreeStatus,belongToBankList
        } = this.state
		let params ={
		  "addType": "1",//0：平台新增1：企业新增
		  "belongToBank": obj.bank,
		  "cardNumber": obj.account,
		  "cardholderMobile": obj.telphone,
		  "cardholderName": obj.name,
		  //"cbcId": "id",
		   "code": codeInfo,
		  // "comId": "企业ID",
		  // "createBy": "创建人",
		  // "createTime": "创建时间",
		  // "createWay": "创建方式：0：平台新增1：企业新增",
		  // "modifyBy": "修改人",
		  // "modifyTime": "修改时间",
		  // "operatorAccount": "操作人账号",
		  "recStatus": 0,
		  // "remark": "备注",
		  // "status": "状态",
		  // "unbundleTime": "解绑时间"
		}
		if(!params.cardholderName){
			return Taro.showToast({
			  title: "请正确输入持卡人名字！",
			  icon: "none"
			})
		}
		var pattern = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/
		if(!params.cardNumber||!pattern.test(params.cardNumber)){
			return Taro.showToast({
			  title: "请正确输入银行卡号！",
			  icon: "none"
			})
		}
		if(!params.belongToBank){
			return Taro.showToast({
			  title: "请正确输入所属银行！",
			  icon: "none"
			})
		}
		if(!params.cardholderMobile||!require('@/common/index').default.iphoneTest(params.cardholderMobile)){
			return Taro.showToast({
			  title: "请正确输入持卡人银行预留手机联系方式！",
			  icon: "none"
			})
		}
		
		if(!codeInfo){
			return Taro.showToast({
			  title: "请输入验证码！",
			  icon: "none"
			})
		}
		if(!agreeStatus){
			return Taro.showToast({
			  title: "请输同意协议！",
			  icon: "none"
			})
		}
		http.appSaveBank(params).then(res=>{
			Taro.navigateTo({
			    url:'/pages/userbank/userbank'
			})
		})
    }
  clickBankSel(){
	
	  this.setState({isOpened:true})
  }
    render() {
        const {
            obj,
			codeStatus,
			limitCode,
			agreeStatus,
			codeInfo,
			belongToBankList,
		    isOpened
        } = this.state
        return (
            <View className='b_adduserbank'>
                <DNavBar title={'添加银行卡'}></DNavBar>
                <View className='b_adduserbank__content'>
                    <View className='b_adduserbank__form'>
					  <View className='b_adduserbank__form_titleMsg'>请绑定持卡人本人的银行卡</View>
                        <AtForm>
						    <DAtInpute maxLength={10} type='text' value={obj.name} onChange={this.onHandleName.bind(this)} title='持卡人' placeholder='请输入持卡人姓名'>
							<AtIcon value='alert-circle' size='15' ></AtIcon>
							</DAtInpute>
                            <DAtInpute type='number' value={obj.account} onChange={this.onHandleAccount.bind(this)} title='卡号' type="number" placeholder='请输入卡号'></DAtInpute>
                            <DAtInpute className="isRead" value={obj.bank} editable={false} onClick={this.clickBankSel.bind(this)}  title='所属银行' placeholder='请输入所属银行'></DAtInpute>
                            <DAtInpute type='phone' value={obj.telphone} onChange={this.onHandleTelphone.bind(this)} title='手机号码' type='phone' placeholder='请输入持卡人银行预留手机联系方式'></DAtInpute>
                            <DAtInpute onChange={(codeInfo)=>this.setState({codeInfo})} value={codeInfo}  title='验证码' type='text' placeholder='请填写验证码'>
							{codeStatus==limitCode&&<AtButton className='item_btn' type='primary' size='normal' onClick={this.onSentCode.bind(this)}>获取验证码</AtButton>}
							{codeStatus<limitCode&&<AtButton className='item_btn item_btn_sent' disabled={true} size='normal'>{codeStatus}s后重新获取</AtButton>}
							</DAtInpute>

							<View className='at-row-self'>
							<DAgree value={agreeStatus} type='6' text='用户协议' onHandleChange={this.onHandleChange.bind(this)}></DAgree>
							  
							</View>
						</AtForm>
                    </View>
                </View>
				
                <AtButton className='item_btn b_adduserbank__btn' onClick={this.onSubmit.bind(this)}>完成</AtButton>
           <AtActionSheet onClose={()=>this.setState({isOpened:false})} isOpened={isOpened}  title='请选择银行卡所属银行'>
             {belongToBankList.map((item)=>{
           	  return <AtActionSheetItem onClick={ this.handleActionSheet.bind(this,item) } key={item}>{item}</AtActionSheetItem>
             })
             }
           </AtActionSheet>
			</View>
        )
    }
}